/*
 * @Description: 绑定结果页面
 * @Author: tao.xie
 * @Date: 2019-03-25 19:02:49
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-25 19:03:26
 */
<template>
  <transition name="fade">
    <div
      class="wrapper"
      v-if="show"
    >
      <title-bar
        titleText="添加银行卡"
        :needBorder="true"
        :needBack="false"
      />
      <div class="flex-v flex-vc content-wrapper">
        <img :src="require('../assets/ok.png')" />
        <div class="tips-wrapper flex-v flex-vc">
          <span>提交成功</span>
          <span>稍后可在消息中心查看添加结果 请耐心等待注意查收</span>
        </div>
        <button
          class="baseBgColorWithActive"
          @click="close"
        >完成</button>
      </div>
    </div>
  </transition>
</template>

<script>
import TitleBar from '@/components/titlebar/TitleBar'
import { gobackNoParams } from 'vue-xiaobu-utils'
export default {
  components: {
    'title-bar': TitleBar
  },
  props: {
    show: {
      type: Boolean,
      required: true,
      defualt: false
    }
  },
  methods: {
    close() {
      gobackNoParams()
    }
  }
}
</script>

<style scoped>
/* 最外层包裹层 */
.wrapper {
  height: 100%;
  z-index: 999;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* 进入和退出的动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 图片 */
.content-wrapper > img {
  width: 180px;
  height: 180px;
  margin-top: 100px;
}
/* 按钮 */
.content-wrapper > button {
  color: #fff;
  width: 690px;
  height: 80px;
  font-size: 15px; /*no*/
  line-height: 21px; /*no*/
  border: none;
  border-radius: 8px;
  position: absolute;
  bottom: 60px;
  left: 30px;
}
/* 提交结果 */
.tips-wrapper > span:first-of-type {
  color: #666;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
}
/* 提交结果后第二行文字 */
.tips-wrapper > span:nth-of-type(2) {
  color: #666;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  width: 392px;
  margin-top: 20px;
  text-align: center;
}
</style>
